<template>
  <div class="con">
    <el-container>
      <el-container>
        <el-main style="padding:0; background:#fff">
          <!-- 放置内容区 -->
          <div class="contbox6_10" v-if="true">
            <p class="titlelist6_10">
              APP管理<span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span
              >分享模板管理
            </p>
            <div v-if="sign" class="content">
              <div>
                <div style="margin-top: 10px;">
                  <el-table
                    :data="list"
                    ref="multipleTable"
                    :header-cell-style="{
                      background: '#F9FAFC',
                      color: '#222'
                    }"
                    stripe
                    border
                    :row-style="{ height: '0px' }"
                    :cell-style="{ padding: '0px' }"
                    style="margin-top: 24px !important;"
                  >
                    <!-- <el-table-column
                      type="selection"
                      min-width="55"
                    ></el-table-column> -->
                    <el-table-column
                      :span="8"
                      align="center"
                      label="机构ID"
                      v-show="sign"
                    >
                      <template slot-scope="scope">
                        <span>{{ scope.row.oemUid }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      :span="8"
                      align="center"
                      label="机构名称"
                      v-show="sign"
                    >
                      <template slot-scope="scope">
                        <span>{{ scope.row.officeName }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      :span="8"
                      align="center"
                      label="手机号"
                      v-show="sign"
                    >
                      <template slot-scope="scope">
                        <span>{{ scope.row.phone }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column :span="8" align="center" label="展示数量">
                      <template slot-scope="scope">
                        <span>{{ scope.row.showNum }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column :span="8" align="center" label="停用数量">
                      <template slot-scope="scope">
                        <span>{{ scope.row.stopNum }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column min-width="160" align="center" label="更新时间">
                      <template slot-scope="scope">
                        <span>{{ scope.row.updateDate }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="200">
                      <template slot-scope="scope">
                        <el-button
                          size="small"
                          type="text"
                          @click="createWindow(scope.row)"
                          v-if="isAuth('shareDetails')"
                          >查看</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="font-size: 16px;margin-top: 30px">
                    <!-- <div
                      @click="exportFile"
                      class="filter-container"
                      style="margin-left:20px;float: left; text-align: left; font-size: 16px; color: rgb(31, 165, 243); cursor: pointer; width: auto"
                    >
                      批量导出
                    </div> -->

                    <div
                      v-show="!listLoading"
                      class="pagination-container"
                    >
                      <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="listQuery.page"
                        :page-sizes="[20, 50, 100]"
                        :page-size="listQuery.number"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                      ></el-pagination>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="!sign" class="imageLog " style="height: auto !important;">
            <div class="share">
              <div class="preview">
                <p>预览图</p>
                <el-image
                  :src="form.photoPath"
                  style="height: 480px;width: 320px"
                  v-show="form.photoPath"
                ></el-image>
              </div>
              <!--<div class="previewBtn">-->
              <!--<el-button> 生成分享海报</el-button>-->
              <!--</div>-->
            </div>
            <div class="uploadingBtn">
              <el-upload
                action
                ref="upload"
                :http-request="submitFileSave"
                :before-upload="beforeAvatarUpload"
                :show-file-list="false"
                :limit="5"
              >
                <div style="display: flex">
                  <el-button size="small" type="primary"
                    >上传banner图片</el-button
                  >
                  要求：不得超过1M,尺寸要求：1080*1920;最多上传不能超过5张
                </div>
              </el-upload>
            </div>
            <div class="imageList" style="height: auto !important;">
              <div class="imageInfo" v-for="(itms, i) in form.photos" :key="i">
                <el-image
                  :src="itms.imgUrl"
                  style="height: 300px;width: 150px"
                ></el-image>
                <div class="imageText" style="line-height: 100px;">
                  <el-button
                    :type="form.photos[i].status == 0 ? 'primary' : 'danger'"
                    @click="
                      form.photos[i].status == 0
                        ? (form.photos[i].status = 1)(
                            (form.photoId.operaType = 2)
                          )
                        : (form.photos[i].status = '0')(
                            (form.photoId.operaType = 2)
                          )
                    "
                    v-if="form.photos[i].status != 3"
                  >
                    {{ form.photos[i].status == 0 ? "不使用" : "使 用" }}
                  </el-button>
                  <el-button @click="detailFile(i)"> X </el-button>
                </div>
              </div>
            </div>
            <div class="imageList">
              <el-button @click="saveFormData"> 保存</el-button>
            </div>
          </div>

          <!--详情页-->
          <el-dialog
            :close-on-click-modal="false"
            title="详情"
            :visible.sync="dialogFormBrandList"
          >
            <el-form
              :model="listQuery"
              :rules="rules"
              ref="form"
              label-width="150px"
            >
              <el-row>
                <el-Col :span="24">
                  <div class="imageList">
                    <div
                      class="imageInfo"
                      v-for="(itms, i) in fileList"
                      :key="i"
                    >
                      <el-image
                        :src="itms.imgUrl"
                        style="height: 300px;width: 150px"
                      ></el-image>
                      <div class="imageText">
                        <el-button
                          :type="itms.status == 0 ? 'danger' : 'primary'"
                          icon="plus"
                          @click="
                            upStatus(itms.status == 0 ? '3' : '0', itms),
                              fileList[i].status == 0
                                ? (fileList[i].status = '3')
                                : (fileList[i].status = '0')
                          "
                        >
                          {{ itms.status == 0 ? "强制关闭" : "恢复" }}
                        </el-button>
                      </div>
                    </div>
                  </div>
                </el-Col>
              </el-row>
            </el-form>
          </el-dialog>
        </el-main>
        <!--<el-footer style="padding:0;">-->
        <!--<footerbox></footerbox>-->
        <!--</el-footer>-->
        <!--</el-container>-->
      </el-container>
    </el-container>
  </div>
</template>

<script>
import https from '../../plugins/https';
export default {
  name: "shareTheTemplate",
  data() {
    return {
      list: null,
      total: null,
      listLoading: true,
      checkedAll: false,
      listQuery: {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        channelName: "", //	品牌名称
        channelCode: "", //	品牌编号
        officeType: "", //	机构类型
        officeName: "", //	机构名称
        phone: "", //	手机号
        status: "", //	状态
        startDate: "", //	开始时间
        endDate: "", //	结束时间
        page: 1, //第几页
        number: 20 //每页几条
      },
      form: {
        photoPath: "",
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        photos: []
      },
      rules: {},
      fileData: new FormData(), //文件上传对象
      // urltype: this.GLOBAL.httpurl,//请求地址
      selectTime: [],
      sign: localStorage.getItem("jurisdiction") == 2, //最高权限看到的true
      dialogFormBrandList: false, //创建品牌页面
      multipleSelection: [], //选中的数组
      fileList: []
    };
  },
  // 创建列表
  created() {
    let that = this;
    that.handleSelectList();
  },

  methods: {
    /**
     * @Author： Zhu Liang Fu
     * @Date：2020/7/15
     * @annotation: 全选
     **/
    selAll() {
      if (this.checkedAll) {
        this.list.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 16:41
     * @annotation： 界面集合获取数据
     **/
    handleSelectList() {
      let that = this;
      if (that.sign) {
        that.listLoading = true;
        https.shareMode(that.listQuery)
          .then(res => {
            if (res.data.code == "0000") {
              that.list = res.data.data;
              that.total = res.data.total;
              that.listLoading = false;
            } else {
              that.listLoading = false;
              layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
              // that.$notify({
              //   title: "错误",
              //   message: res.data.msg,
              //   type: "error"
              // });
            }
          });
      } else {
        that
          .axios({
            //axios请求
            method: "POST",
            url: "/api/template/querySysShare",
            headers: { "Content-Type": "application/json;charset=utf-8" },
            data: { oemUid: that.listQuery.oemUid }
          })
          .then(res => {
            if (res.data.code == "0000") {
              that.form.photos = res.data.data;
            } else {
              layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
            }
          });
      }
    },

    /**
     * @author: Zhu Liangfu
     * @Description: 保存
     * @date:2020/7/14   15:11
     */
    saveFormData() {
      let that = this;
      that
        .axios({
          //axios请求
          method: "POST",
          url: "/api/template/saveShare",
          headers: { "Content-Type": "application/json;charset=utf-8" },
          data: that.form
        })
        .then(res => {
          if (res.data.code == "0000") {
            that.form.photos = [];
            that.form.photoPath = "";
            that.handleSelectList();
          } else {
            layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
          }
        });
    },

    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:57
     * @annotation： 分页
     **/
    handleSizeChange(val) {
      let that = this;
      that.listQuery.number = val;
      that.handleSelectList();
    },

    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:57
     * @annotation： 分页
     **/
    handleCurrentChange(val) {
      let that = this;
      that.listQuery.page = val;
      that.handleSelectList();
    },
    /**
     * @author: Zhu Liangfu
     * @Description: 修改状态
     * @date:2020/7/14   20:48
     */
    upStatus(sataus, row) {
      let that = this;
      that
        .axios({
          //axios请求
          method: "POST",
          url: "/api/template/updateStatus",
          headers: { "Content-Type": "application/json;charset=utf-8" },
          data: { uid: row.id, status: sataus }
        })
        .then(res => {
          if (res.data.code == "0000") {
            that.handleSelectList();
          } else {
           layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
          }
        });
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 16:41
     * @annotation：  时间格式化
     **/
    timeData(e) {
      let that = this;
      if (e) {
        that.listQuery.startDate = e[0];
        that.listQuery.endDate = e[1];
      } else {
        that.listQuery.startDate = undefined;
        that.listQuery.endDate = undefined;
      }
    },
    /**
     * @author: Zhu Liangfu
     * @Description:查看弹框
     * @date:2020/6/10   20:50
     */
    createWindow(val) {
      let that = this;
      if (val) {
        https.seeShareMode({ oemUid: val.oemUid })
          .then(res => {
            if (res.data.code == "0000") {
              that.fileList = res.data.data;
            } else {
              layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
            }
          });

        that.dialogFormBrandList = true;
      }
    },
    /**
     * @author: Zhu Liangfu
     * @Description: 图片校验
     * @date:2020/7/13   15:08
     */
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 1000;
      if (!isJPG) {
         layer.open({
            content:"上传预览图片只能是 jpg、jpeg、png 格式!",
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
        // this.$message.error();
        return false;
      }
      if (!isLt2M) {
         layer.open({
            content:"上传图片大小不能超过 1Mb!",
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
        // this.$message.error();
        return false;
      }
      const isSize = new Promise(function(resolve, reject) {
        let width = 1080;
        let height = 1920;
        let _URL = window.URL || window.webkitURL;
        let image = new Image();
        image.onload = function() {
          let valid = image.width == width && image.height == height;
          valid ? resolve() : reject();
        };
        image.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          // this.$message.error();
           layer.open({
            content: "banner图片尺寸不符合,只能是 1080*1920!",
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
          return Promise.reject();
        }
      );
      return isJPG && isLt2M && isSize;
    },
    /**
     * @author: Zhu Liangfu
     * @Description: 上传图片
     * @date:2020/7/13   15:00
     */
    submitFileSave() {
      let that = this;
      if (that.form.photos.length < 5) {
        that.fileData.append("file", this.$refs.upload.uploadFiles[0].raw);
        that
          .axios({
            method: "POST",
            url: "/api/fileUpload",
            headers: { "Content-Type": "multipart/form-data" },
            data: that.fileData
          })
          .then(res => {
            console.log(res.data);
            if (res.data.code == "0000") {
              that.form.photoPath = res.data.data.filePath;
              that.form.photos.push({
                imgUrl: res.data.data.filePath,
                status: "1",
                operaType: "1"
              });
              // that.$notify({
              //   title: '成功',
              //   message: '上传成功',
              //   type: 'success'
              // });
            } else {
              layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
            }
            this.fileData.delete("file");
            this.$refs.upload.uploadFiles = [];
          })
          .catch(e => {
            this.fileData.delete("file");
            this.$refs.upload.uploadFiles = [];
            
          });
      } else {
        this.$refs.upload.uploadFiles = [];
        layer.open({
            content: "预览图最大可上传5张，您已上传五张",
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
        // that.$notify({
        //   title: "警告",
        //   message: ,
        //   type: "error"
        // });
      }
    },

    /**
     * @author: Zhu Liangfu
     * @Description: 导出模板
     * @date:2020/6/11   20:44
     */
    exportFile() {
      let that = this;
      that
        .axios({
          method: "POST",
          url: "/api/product/excel/export",
          headers: { "Content-Type": "application/json;charset=utf-8" },
          data: that.listQuery,
          responseType: "arraybuffer"
        })
        .then(res => {
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel;charset=utf-8"
          });
          var link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          let date = new Date();
          link.download =
            "模板管理列表" +
            date.getFullYear() +
            (date.getMonth() < 10 ? "0" + date.getMonth() : date.getMonth()) +
            (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
            (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
            (date.getMinutes() < 10
              ? "0" + date.getMinutes()
              : date.getMinutes()) +
            (date.getSeconds() < 10
              ? "0" + date.getSeconds()
              : date.getSeconds());
          link.click();
        })
        .catch(e => {
          // that.$notify({
          //   title: "错误",
          //   message: "导出失败",
          //   type: "error"
          // });
        });
    },

    /**
     * @author: Zhu Liangfu
     * @Description: 删除banner图片
     * @date:2020/7/13   18:05
     */
    detailFile(row) {
      let that = this;
      that
        .$confirm("请确认是否删除！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          that.form.photos.splice(row, 1);
        })
        .catch(() => {
        //   that.$message({
        //     type: "info",
        //     message: "已取消停用"
        //   });
        });
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:50
     * @annotation： 重置查询条件
     **/
    resetTheSearch() {
      let that = this;
      that.listQuery = {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        channelName: "", //	品牌名称
        channelCode: "", //	品牌编号
        officeType: "", //	机构类型
        officeName: "", //	机构名称
        phone: "", //	手机号
        status: "", //	状态
        startDate: "", //	开始时间
        endDate: "", //	结束时间
        page: 1, //第几页
        number: 20 //每页几条
      };
      that.selectTime = [];
      that.handleSelectList();
    }
  }
};
</script>

<style scoped>
.con{
  position: relative;
  background: #fff;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}


.fileList {
  display: inline-block;
  border-style: solid dotted dashed double;
  padding: 8px 8px 8px 8px;
  text-align: center;
}

.share {
  width: 100%;
  height: 100%;
  position: relative;
}

.imageLog {
  width: 90%;
  height: 100%;
  margin: 65px 5% 5% 5%;
}

.preview {
  padding: 10px 10px 10px 10px;
  margin: 30px 50% 0% 37%;
  width: 24%;
  height: 526px;
  border: 1px rgb(187, 187, 187) solid;
  text-align: center;
}

.uploadingBtn {
  margin: 10px 0% 0% 33%;
  width: 50%;
}

.previewBtn {
  position: absolute;
  top: 0%;
  margin: 20% 70%;
}

.imageList {
  margin: 10px 0px 10px 0px;
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

.imageInfo {
  margin: 20px 10px 20px 10px;
  height: 300px;
  width: 150px;
  display: flex;
}

.imageText {
  height: 300px;
  line-height: 300px;
  width: 150px;
  display: none;
  text-decoration: none;
}

.imageInfo:hover .imageText {
  display: block;
  position: absolute;
  color: #ff3428;
  width: 150px;
  z-index: 2;
  height: 300px;
  line-height: 300px;
  background: #ffffff;
  filter: alpha(opacity=60);
  -moz-opacity: 0.9;
  opacity: 0.9;
}
.content {
  min-width: calc(100% - 40px);
}
</style>
